<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="额度卡" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="quotacard">
			<view class="quotacard-title">
				<view @click="onClickSelectIndex(3)" :class="{ 'quotacard-title-item-active': selectIndex === 3 }" class="quotacard-title-item">全部</view>
				<view @click="onClickSelectIndex(1)" :class="{ 'quotacard-title-item-active': selectIndex === 1 }" class="quotacard-title-item">使用中</view>
				<view @click="onClickSelectIndex(0)" :class="{ 'quotacard-title-item-active': selectIndex === 0 }" class="quotacard-title-item">未使用</view>
				<view @click="onClickSelectIndex(2)" :class="{ 'quotacard-title-item-active': selectIndex === 2 }" class="quotacard-title-item">已用完</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="allList" :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 3" scroll-y class="quotacard-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="allList" :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 3" scroll-y class="quotacard-list">
			<!-- #endif -->
				<view v-for="item in quotacards_all" :key="item.id" class="quotacard-list-item">
					<view class="quotacard-list-item-name">
						<text class="quotacard-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="quotacard-list-item-name-right useing">未使用</text>
						<text v-if="item.status === '1'" class="quotacard-list-item-name-right nouse">使用中</text>
						<text v-if="item.status === '2'" class="quotacard-list-item-name-right end">已用完</text>
					</view>
					<view class="quotacard-list-item-price">
						<text class="quotacard-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="quotacard-list-item-price-right">余额：¥{{ item.balance }}</text>
					</view>
					<view class="quotacard-list-item-line"></view>
					<view class="quotacard-list-item-kahao">卡号：{{ item.id }}</view>
					<view class="quotacard-list-item-kahao">生成时间：{{ item.createdAt }}</view>
					<view class="quotacard-list-item-kahao">面值：{{ item.sellingPrice }}元</view>
					<view class="quotacard-list-item-kahao">折扣率：{{ item.rate }}</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="ingList" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 1" scroll-y class="quotacard-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="ingList" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 1" scroll-y class="quotacard-list">
			<!-- #endif -->
				<view v-for="item in quotacards_ing" :key="item.id" class="quotacard-list-item">
					<view class="quotacard-list-item-name">
						<text class="quotacard-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="quotacard-list-item-name-right useing">未使用</text>
						<text v-if="item.status === '1'" class="quotacard-list-item-name-right nouse">使用中</text>
						<text v-if="item.status === '2'" class="quotacard-list-item-name-right end">已用完</text>
					</view>
					<view class="quotacard-list-item-price">
						<text class="quotacard-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="quotacard-list-item-price-right">余额：¥{{ item.balance }}</text>
					</view>
					<view class="quotacard-list-item-line"></view>
					<view class="quotacard-list-item-kahao">卡号：{{ item.id }}</view>
					<view class="quotacard-list-item-kahao">生成时间：{{ item.createdAt }}</view>
					<view class="quotacard-list-item-kahao">面值：{{ item.sellingPrice }}元</view>
					<view class="quotacard-list-item-kahao">折扣率：{{ item.rate }}</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="noList" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 0" scroll-y class="quotacard-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="noList" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 0" scroll-y class="quotacard-list">
			<!-- #endif -->
				<view v-for="item in quotacards_no" :key="item.id" class="quotacard-list-item">
					<view class="quotacard-list-item-name">
						<text class="quotacard-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="quotacard-list-item-name-right useing">未使用</text>
						<text v-if="item.status === '1'" class="quotacard-list-item-name-right nouse">使用中</text>
						<text v-if="item.status === '2'" class="quotacard-list-item-name-right end">已用完</text>
					</view>
					<view class="quotacard-list-item-price">
						<text class="quotacard-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="quotacard-list-item-price-right">余额：¥{{ item.balance }}</text>
					</view>
					<view class="quotacard-list-item-line"></view>
					<view class="quotacard-list-item-kahao">卡号：{{ item.id }}</view>
					<view class="quotacard-list-item-kahao">生成时间：{{ item.createdAt }}</view>
					<view class="quotacard-list-item-kahao">面值：{{ item.sellingPrice }}元</view>
					<view class="quotacard-list-item-kahao">折扣率：{{ item.rate }}</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="endList" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 2" scroll-y class="quotacard-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="endList" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 2" scroll-y class="quotacard-list">
			<!-- #endif -->
				<view v-for="item in quotacards_end" :key="item.id" class="quotacard-list-item">
					<view class="quotacard-list-item-name">
						<text class="quotacard-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="quotacard-list-item-name-right useing">未使用</text>
						<text v-if="item.status === '1'" class="quotacard-list-item-name-right nouse">使用中</text>
						<text v-if="item.status === '2'" class="quotacard-list-item-name-right end">已用完</text>
					</view>
					<view class="quotacard-list-item-price">
						<text class="quotacard-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="quotacard-list-item-price-right">余额：¥{{ item.balance }}</text>
					</view>
					<view class="quotacard-list-item-line"></view>
					<view class="quotacard-list-item-kahao">卡号：{{ item.id }}</view>
					<view class="quotacard-list-item-kahao">生成时间：{{ item.createdAt }}</view>
					<view class="quotacard-list-item-kahao">面值：{{ item.sellingPrice }}元</view>
					<view class="quotacard-list-item-kahao">折扣率：{{ item.rate }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { config } from '@/utils/config.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
	data() {
		return {
			h5ListHeight: 0,
			appListHeight: 0,
			selectIndex: 3,
			// 全部的
			quotacards_all: [],
			page_all: 1,
			size_all: 10,
			total_all: 0,
			totalPage_all: 0,
			// 使用中
			quotacards_ing: [],
			page_ing: 1,
			size_ing: 10,
			total_ing: 0,
			totalPage_ing: 0,
			// 未使用
			quotacards_no: [],
			page_no: 1,
			size_no: 10,
			total_no: 0,
			totalPage_no: 0,
			// 已使用
			quotacards_end: [],
			page_end: 1,
			size_end: 10,
			total_end: 0,
			totalPage_end: 0,
		};
	},
	components: {
		uniNavBar
	},
	onLoad() {
		const token = uni.getStorageSync('d_token')
		if (!token) {
			uni.showToast({
				icon: 'none',
				title: '尚未登录, 请先登录'
			})
			setTimeout(() => {
				uni.removeStorageSync('d_role')
				uni.removeStorageSync('d_memberId')
				uni.removeStorageSync('d_token')
				uni.removeStorageSync('d_openId')
				uni.reLaunch({
					url: '../verificationcodelogin/verificationcodelogin'
				})
			}, 777)
			return false
		}
		
		this._getCards_all();
		this._getCards_ing();
		this._getCards_no();
		this._getCards_end();
	},
	// 下拉刷新
	onPullDownRefresh() {
		if (this.selectIndex === 0) {
			this.quotacards_no = []
			this.page_no = 1
			this.size_no = 10
			this.total_no = 0
			this.totalPage_no = 0
			this._getCards_no()
		} else if (this.selectIndex === 1) {
			this.quotacards_ing = []
			this.page_ing = 1
			this.size_ing = 10
			this.total_ing = 0
			this.totalPage_ing = 0
			this._getCards_ing()
		} else if (this.selectIndex === 2) {
			this.quotacards_end = []
			this.page_end = 1
			this.size_end = 10
			this.total_end = 0
			this.totalPage_end = 0
			this._getCards_end()
		} else if (this.selectIndex === 3) {
			this.quotacards_all = []
			this.page_all = 1
			this.size_all = 10
			this.total_all = 0
			this.totalPage_all = 0
			this._getCards_all()
		}
	},
	onReady() {
		const that = this
		uni.getSystemInfo({
			success: ((res) => {
				let info = uni.createSelectorQuery().select('.quotacard-title');
				info.boundingClientRect(function(data) {
					that.h5ListHeight = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
					that.appListHeight = res.windowHeight - res.statusBarHeight - 44 - data.height
				}).exec()
			})
		})
	},
	methods: {
		allList() { // 全部的
			const page1 = this.page_all + 1;
			const totalPage = this.totalPage_all
			if (page1 <= totalPage) {
				this.page_all = page1
				this._getCards_all()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		ingList() { // 使用中
			const page1 = this.page_ing + 1;
			const totalPage = this.totalPage_ing
			if (page1 <= totalPage) {
				this.page_ing = page1
				this._getCards_ing()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		noList() { // 未使用
			const page1 = this.page_no + 1;
			const totalPage = this.totalPage_no
			if (page1 <= totalPage) {
				this.page_no = page1
				this._getCards_no()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		endList() { // 已用完
			const page1 = this.page_end + 1;
			const totalPage = this.totalPage_end
			if (page1 <= totalPage) {
				this.page_end = page1
				this._getCards_end()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		back() {
			uni.navigateBack({})
		},
		onClickSelectIndex(index) {
			this.selectIndex = index;
		},
		pageTotal(rowCount, pageSize) {
			if (rowCount === null || rowCount === "") {
				return 0;
			} else {
				if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
					return parseInt(rowCount / pageSize)
				}
				if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
					return parseInt(rowCount / pageSize) + 1
				}
			}
		},
		_getCards_all() {
			const page = this.page_all
			const size = this.size_all
			uni.request({
				url: `${config.api_base_url}agent/purchase/${page}/${size}`,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total_all = data.total
						this.totalPage_all = this.pageTotal(this.total_all, this.size_all)
						this.quotacards_all = this.quotacards_all.concat(data.rows)
					} else {
						this.total_all = 0
						this.totalPage_all = 0
						this.quotacards_all = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '请求失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			});
		},
		_getCards_ing() {
			const page = this.page_ing
			const size = this.size_ing
			uni.request({
				url: `${config.api_base_url}agent/purchase/1/${page}/${size}`,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total_ing = data.total
						this.totalPage_ing = this.pageTotal(this.total_ing, this.size_ing)
						this.quotacards_ing = this.quotacards_ing.concat(data.rows)
					} else {
						this.total_ing = 0
						this.totalPage_ing = 0
						this.quotacards_ing = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '请求失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			});
		},
		_getCards_no() {
			const page = this.page_no
			const size = this.size_no
			uni.request({
				url: `${config.api_base_url}agent/purchase/0/${page}/${size}`,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total_no = data.total
						this.totalPage_no = this.pageTotal(this.total_no, this.size_no)
						this.quotacards_no = this.quotacards_no.concat(data.rows)
					} else {
						this.total_no = 0
						this.totalPage_no = 0
						this.quotacards_no = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '请求失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			});
		},
		_getCards_end() {
			const page = this.page_end
			const size = this.size_end
			uni.request({
				url: `${config.api_base_url}agent/purchase/2/${page}/${size}`,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total_end = data.total
						this.totalPage_end = this.pageTotal(this.total_end, this.size_end)
						this.quotacards_end = this.quotacards_end.concat(data.rows)
					} else {
						this.total_end = 0
						this.totalPage_end = 0
						this.quotacards_end = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '请求失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f6f5f8;
}
</style>
<style scoped>
.quotacard {
	width: 100%;
}
.quotacard-title {
	width: 100%;
	height: 64rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-left: 16rpx;
	padding-right: 14rpx;
	background-color: #fff;
	box-sizing: border-box;
	border-top: 1px solid #f6f5f8;
}
.quotacard-title-item {
	width: 25%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.85);
}
.quotacard-title-item-active {
	color: #f02230;
	position: relative;
}
.quotacard-title-item-active::after {
	content: ' ';
	position: absolute;
	left: 50%;
	bottom: -8rpx;
	margin-left: -31rpx;
	width: 62rpx;
	height: 4rpx;
	border-radius: 2rpx;
	background-color: #f02230;
}
.quotacard-list {
	width: 100%;
	box-sizing: border-box;
	padding-top: 20rpx;
	padding-left: 16rpx;
	padding-right: 14rpx;
}
.quotacard-list-item {
	width: 100%;
	background-color: #fff;
	border-radius: 12rpx;
	box-sizing: border-box;
	padding-top: 24rpx;
	padding-right: 28rpx;
	padding-bottom: 22rpx;
	padding-left: 36rpx;
	display: flex;
	flex-direction: column;
	margin-bottom: 12rpx;
}
.quotacard-list-item:last-child {
	margin-bottom: 0;
}
.quotacard-list-item-name {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.quotacard-list-item-name-left {
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
	font-weight: 600;
}
.quotacard-list-item-name-right {
	font-size: 24rpx;
	font-weight: 400;
	line-height: 34rpx;
}
.useing {
	color: #0091ff;
}
.nouse {
	color: #f7b500;
}
.end {
	color: #f02230;
}
.quotacard-list-item-price {
	margin-top: 12rpx;
	display: flex;
	align-items: center;
}
.quotacard-list-item-price-left {
	font-size: 36rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	line-height: 50rpx;
	margin-right: 70rpx;
}
.quotacard-list-item-price-right {
	font-size: 36rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	line-height: 50rpx;
}
.quotacard-list-item-line {
	width: 100%;
	margin-top: 12rpx;
	height: 2rpx;
	background-color: #eee;
}
.quotacard-list-item-kahao {
	margin-top: 10rpx;
	font-size: 28rpx;
	color: #6d7278;
	line-height: 40rpx;
	margin-bottom: 6rpx;
}
.quotacard-list-item-kahao:last-child {
	margin-bottom: 0;
}
</style>
